<script setup>
    import { onMounted } from 'vue'
    import { getHomeData } from '@/api/home'

    import LeftParty from './components/LeftParty.vue'
    import LeftPopulationDistribution from './components/LeftPopulationDistribution.vue'
    import LeftSpecialCrowd from './components/LeftSpecialCrowd.vue'

    import RightEventOverview from './components/RightEventOverview.vue'
    import RightCommunitySecurity from './components/RightCommunitySecurity.vue'

    import CenterStatistics from './components/Center.vue'

    // 以房管人 数据搜索
    import DataSearch from '@/view/govern/components/DataSearch.vue'

    // 特殊人群列表
    import SpecialCrowdList from '@/view/govern/components/SpecialCrowd/details.vue'

    let xzVr = 'https://quanjingtong.cn/t/06lo3wkqomf?scene_id=3962'


    onMounted(() => {
        init()
    })

    // 数据加载中
    let dataLoading = $ref(false)

    // 党建引领
    let partyData = $ref([])

    // 人口分布
    let populationData = $ref([])

    // 特殊人群
    let specialCrowdData = $ref([])

    // 事件概览
    let eventData = $ref([])

    // 实时监控
    let videoUrl = $ref('')

    // 统计数据
    let statisticsData = $ref([])

    const init = () => {
        dataLoading = true
        getHomeData().then(res => {
            let { party, distribute, specialPerson, incident, video, top } = res.result
            dataLoading = false
            
            partyData = party
            populationData = distribute
            specialCrowdData = specialPerson
            eventData = incident
            console.log(eventData)
            videoUrl= video[0] ? video[0].numb : ''
            statisticsData = top
        })
    }


    // 显示以房管人 数据搜索
    let dataSearch = $ref(null)
    const showSearch = () => {
        dataSearch.showDialog()
    }

    // 显示特殊人群
    let specialCrowd = $ref(null)
    const showSpecialCrowd = (type) => {
        console.log(type)
        specialCrowd.showDetails(type)
    }

</script>

<template>
    <div class="content-main home-main" v-loading="dataLoading">

        <div class="shadow left-shadow"></div>
        <div class="shadow right-shadow"></div>

        <iframe :src="xzVr" frameborder="0"></iframe>

        <template v-if="!dataLoading">
            <div class="left-card">
                
                <!-- 党建引领 -->
                <left-party :list="partyData"></left-party>
    
                <!-- 人口分布 -->
                <left-population-distribution :list="populationData" @showDataSearch="showSearch"></left-population-distribution>
    
                <!-- 特殊人群 -->
                <left-special-crowd :list="specialCrowdData" @clickSpecialItem="showSpecialCrowd"></left-special-crowd>
    
            </div>
    
            <div class="center">
    
                <!-- 统计 -->
                <center-statistics :list="statisticsData"></center-statistics>
    
            </div>
            <div class="right-card">
    
                <!-- 事件概览 -->
                <right-event-overview :list="eventData"></right-event-overview>
    
                <!-- 实时监控 -->
                <right-community-security :url="videoUrl"></right-community-security>
    
            </div>
        </template>


        <!-- 以房管人 数据查询 -->
        <data-search ref="dataSearch"></data-search>

        <!-- 特殊人群 -->
        <special-crowd-list ref="specialCrowd"></special-crowd-list>

    </div>

</template>

<style lang="less" scoped>
    .home-main{
        position: relative;

        iframe{
            width: 100%;
            height: 100%;
        }
        .left-card{
            width: 460px;
        }

        .right-card{
            width: 440px;
        }

        .center{
            position: absolute;
            top: 124px;
            left: 528px;
        }
    }
</style>